<template>
    <div class="full-calendar-container">
      <FullCalendar
        ref="fullCalendar"
        :options="calendarOptions"
        @eventReceive="handleEventReceive"
      >
  </FullCalendar>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin,{ Draggable } from '@fullcalendar/interaction'; // 用于日程拖拽和缩放
// 定义日历配置
const calendarOptions = ref({

  //不要乱设置时区，也就时UTC，不然会出现时间不对的情况
  locale: 'zh-cn',//中文化，比如sun变成周日
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
  initialView: 'timeGridWeek', // 设置为周视图

  editable: true,
  eventStartEditable: true,
  eventDurationEditable: true,
  eventResizable: true, // 关键！显式启用调整功能
  eventResizableFromStart: true, // 允许从事件的开始时间进行拖拽


  allDaySlot: true, // 显示全天事件时间槽

  weekNumbers: true, // 显示周数
  weekNumberCalculation: 'iso', // 使用 ISO 标准计算周数
  weekNumberContent: function(arg) { // 自定义周数内容
    return {
      html: '第' + arg.num + '周' // 返回自定义的HTML内容
    };
  },
  views: {
    dayGridMonth: {
    eventResizable: true // 针对月视图单独启用
    }
  },
  buttonText: {
    today: '今天',
    month: '月视图',
    week: '周视图',
    day: '日视图',
  },
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  slotMinTime: '04:00:00', // 日程表从早上4点开始
  slotDuration: '02:00:00', // 时间段跨度设置为2小时
  slotMaxTime:'24:00:00',
  slotLabelFormat: {
    hour: 'numeric',
    minute: '2-digit',
    omitZeroMinute: true,
    meridiem: 'short'
  },

  // 时间段标签内容个性化插槽
  slotLabelContent: function(info) {
        const start = new Date(info.date); // 获取时间段的开始时间
        const end = new Date(start);
        end.setHours(start.getHours() + 2); // 增加2小时得到结束时间
        const startFormatted = start.toLocaleTimeString('zh-cn', { hour: '2-digit', minute: '2-digit' });
        const endFormatted = end.toLocaleTimeString('zh-cn', { hour: '2-digit', minute: '2-digit' });
        return `${startFormatted}-${endFormatted}`;
      },

  events: [
    {
      title: '会议',
      start: '2025-03-10T10:00:00',
      end: '2025-03-12T12:00:00',
      color: '#ff0000',
      allDay: true, // 明确指定全天事件才能在月视图中进行拖拽显示
    },
    {
      title: '项目讨论',
      start: '2025-03-12T14:00:00',
      end: '2025-03-12T16:00:00',
      color: '#00ff00',
    }
  ],
});

// 挂载后获取日历实例（可选）
const fullCalendar = ref(null);
onMounted(() => {
  const calendarApi = fullCalendar.value.getApi();
  console.log('FullCalendar API:', calendarApi);
});
</script>

<!-- 千万不要加scoped 除非你想用默认的界面 -->
<style>
/* 容器样式 */
.full-calendar-container {
  padding: 10px; /* 内边距为 10px */
  width: 100%; /* 容器宽度占满父容器 */
  height: 95%;
  min-width: 800px; /* 最小宽度限制为 800px，适配大屏幕 */
  margin-top: 20px;
  padding-right: 10px;
  margin-right:0px;
  border-radius: 4px; /* 圆角边框，半径为 16px */
  overflow: hidden; /* 隐藏超出容器的内容，确保圆角效果完整 */
  /* 后期使用背景图片可能要考虑一下主体的配色 */
  background-color: rgba(255, 255, 255, 0.829);
  /* background-image: url('../assets/image/calendarBackground.png'); 设置背景图片 */
  font-family: 'Arial', sans-serif; /* 设置字体为 Arial，备用字体为无衬线字体 */
}
.fc{
  height: 100%;
}
.fc-timegrid-axis-frame{
  height: 20px;
}
.fc.th{
  height: 20px;
}

.fc .fc-timegrid-slot-label-cushion {
    height: 100px;
    background: rgba(30, 231, 231, 0.457);
}



/* 事件样式 */
.fc-timegrid-event {
  border-radius: 8px; /* 事件卡片圆角为 8px */
  font-size: 14px; /* 字体大小为 14px */
}

/* 事件标题样式 */
.fc-event-title {
  font-weight: bold; /* 事件标题加粗 */
}

</style>